

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>控制台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{URL::asset('layui/css/layui.css')}}" media="all">
    <link rel="stylesheet" href="{{URL::asset('css/admin.css')}}" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">商品销量排行表</div>
                        <div class="layui-card-body">
                            <div id="main" style="width: 100%;height:400px;"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">订单统计</div>
                        <div class="layui-card-body">
                            <div id="order_main" style="width: 100%;height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{URL::asset('layui/layui.js')}}"></script>
<script>
    layui.config({
        base: '../' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console']);
</script>
</body>
<script src="{{URL::asset('js/echarts.js')}}"></script>
<script src="{{URL::asset('js/jquery-3.1.1.min.js')}}"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var goodsName = [];
    var goodsSell = [];
    $.ajax({
        url:'/admin/goods/sell/desc'
        ,type:'get'
        ,async:false
        ,dataType:'json'
        ,success:function (d) {
            $.each(d.data,function (i,v) {
                goodsName.push(v.goods_name);
                goodsSell.push(v.sell_num);
            });
        }
    });


    // 指定图表的配置项和数据
    var option = {
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#00c5d7'
                },
                formatter: function (value) {
                    // console.log(value);
                    var valueDetal = value.split("-").join("");
                    console.log(valueDetal);
                    var ret = ""; //拼接加\n返回的类目项
                    var maxLength = 4; //每项显示文字个数
                    var valLength = valueDetal.length; //X轴类目项的文字个数
                    // console.log(valLength);
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1) { //如果类目项的文字大于3,
                        for (var i = 0; i < rowN; i++) {
                            var temp = ""; //每次截取的字符串
                            var start = i * maxLength; //开始截取的位置
                            var end = start + maxLength; //结束截取的位置
                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                            temp = valueDetal.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串
                        }
                        return ret;
                    } else {
                        return valueDetal;
                    }
                }
            },
            data: goodsName
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: goodsSell
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


</script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('order_main'));
    var order = [];
    $.ajax({
        url:'/admin/order/tongji'
        ,type:'get'
        ,async:false
        ,dataType:'json'
        ,success:function (d) {
            order = d.data;
        }
    });


    // 指定图表的配置项和数据
    var option = {
        title : {
            text: '总订单统计分析',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['已取消','待支付','待发货','待收货','已签收','已评价','已退款']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:order['qx'], name:'已取消'},
                    {value:order['wf'], name:'待支付'},
                    {value:order['yq'], name:'待发货'},
                    {value:order['ds'], name:'待收货'},
                    {value:order['qs'], name:'已签收'},
                    {value:order['pj'], name:'已评价'},
                    {value:order['tk'], name:'已退款'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


</script>
</html>

